<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>熙康体检预约</title>
  <style>
    .container { padding: 16px; }
    .top-bar { display: flex; gap: 10px; margin-bottom: 20px; }
    .btn { flex: 1; background: #1aad19; color: #fff; border: none; padding: 10px; border-radius: 4px; }
    .section { margin-bottom: 20px; }
    .title { font-size: 16px; font-weight: bold; margin-bottom: 10px; display: block; }
    .form-item { display: flex; align-items: center; margin-bottom: 12px; }
    .label { width: 80px; text-align: right; margin-right: 10px; color: #666; }
    .input { flex: 1; padding: 8px; border: 1px solid #eee; border-radius: 4px; }
    .hospital-desc { padding: 8px; background: #f8f8f8; border-radius: 4px; margin-top: 4px; line-height: 1.6; }
  </style>
</head>
<body>
  <div class="container">
    <!-- 顶部操作 -->
    <div class="top-bar">
      <button class="btn" onclick="handleSubmit()">预约</button>
      <button class="btn" onclick="handleClear()">清空</button>
    </div>

    <!-- 基本信息 -->
    <div class="section">
      <span class="title">基本信息</span>
      <div class="form-item">
        <span class="label">体检单号</span>
        <input class="input" value="20231008990202120" disabled />
      </div>
      <div class="form-item">
        <span class="label">姓名</span>
        <input class="input" id="name" placeholder="输入姓名" />
      </div>
      <div class="form-item">
        <span class="label">性别</span>
        <select id="gender">
          <option value="选择性别">选择性别</option>
          <option value="男">男</option>
          <option value="女">女</option>
        </select>
      </div>
      <div class="form-item">
        <span class="label">手机号</span>
        <input class="input" id="phone" placeholder="输入手机号" type="number" />
      </div>
      <div class="form-item">
        <span class="label">出生日期</span>
        <input class="input" id="birthday" type="date" />
      </div>
      <div class="form-item">
        <span class="label">身份证号</span>
        <input class="input" id="idCard" placeholder="输入身份证号码" />
      </div>
      <div class="form-item">
        <span class="label">家庭住址</span>
        <input class="input" id="address" placeholder="输入通讯地址" />
      </div>
    </div>

    <!-- 预约信息 -->
    <div class="section">
      <span class="title">预约信息</span>
      <div class="form-item">
        <span class="label">预约院区</span>
        <select id="hospital">
          <option value="选择院区地址">选择院区地址</option>
          <option value="院区A">院区A</option>
          <option value="院区B">院区B</option>
        </select>
      </div>
      <div class="form-item" id="hospitalDesc" style="display:none;">
        <span class="label">院区描述</span>
        <div class="hospital-desc">
          <p>营业时间：周一至周六 7:30-11:30</p>
          <p>采血截止：10:30</p>
          <p>联系电话：4006297568</p>
          <p>地址：沈阳市浑南区创新路175号（智慧大街交互处）</p>
        </div>
      </div>
    </div>

    <!-- 预约详情 -->
    <div class="section">
      <span class="title">预约详情</span>
      <div class="form-item">
        <span class="label">预约类型</span>
        <select id="type">
          <option value="预约类型">预约类型</option>
          <option value="个人">个人</option>
          <option value="团体">团体</option>
        </select>
      </div>
      <div class="form-item">
        <span class="label">预约套餐</span>
        <select id="package">
          <option value="预约套餐">预约套餐</option>
          <option value="基础套餐">基础套餐</option>
          <option value="全面套餐">全面套餐</option>
        </select>
      </div>
      <div class="form-item">
        <span class="label">体检时间</span>
        <input class="input" id="checkupDate" type="date" />
      </div>
      <div class="form-item">
        <span class="label">体检时段</span>
        <input class="input" id="timeSlot" placeholder="体检时段" />
      </div>
      <div class="form-item">
        <span class="label">套餐价格</span>
        <input class="input" value="1500" disabled />
      </div>
      <div class="form-item">
        <span class="label">优惠补贴</span>
        <input class="input" value="400" disabled />
      </div>
    </div>
  </div>

  <script>
    // 监听院区选择，显示描述
    document.getElementById('hospital').addEventListener('change', () => {
      const desc = document.getElementById('hospitalDesc')
      desc.style.display = document.getElementById('hospital').value !== '选择院区地址' ? 'block' : 'none'
    })

    // 提交
    function handleSubmit() {
      const form = {
        name: document.getElementById('name').value,
        gender: document.getElementById('gender').value,
        phone: document.getElementById('phone').value,
        birthday: document.getElementById('birthday').value,
        idCard: document.getElementById('idCard').value,
        address: document.getElementById('address').value,
        hospital: document.getElementById('hospital').value,
        type: document.getElementById('type').value,
        package: document.getElementById('package').value,
        checkupDate: document.getElementById('checkupDate').value,
        timeSlot: document.getElementById('timeSlot').value
      }
      console.log('提交表单：', form)
      alert('预约提交中...')
    }

    // 清空
    function handleClear() {
      document.getElementById('name').value = ''
      document.getElementById('gender').value = '选择性别'
      document.getElementById('phone').value = ''
      document.getElementById('birthday').value = ''
      document.getElementById('idCard').value = ''
      document.getElementById('address').value = ''
      document.getElementById('hospital').value = '选择院区地址'
      document.getElementById('hospitalDesc').style.display = 'none'
      document.getElementById('type').value = '预约类型'
      document.getElementById('package').value = '预约套餐'
      document.getElementById('checkupDate').value = ''
      document.getElementById('timeSlot').value = ''
      alert('表单已清空')
    }
  </script>
</body>
</html>